<template>
  <div class="about">
    <div class="company-logo">
      <img class="head-img" :src="require('../assets/img/abouthead.jpg')" alt>
    </div>
    <div class="company-info">
      <div class="company-tabs">
        <div
          v-for="(tab, index) in tabs"
          :key="index"
          :class="['tab-item', active === index ? 'item-active' : '']"
          @click="changeTab(index)"
        >{{ tab }}</div>
      </div>
      <div class="intrudction">
        <div v-if="active === 0" class="intrudction-con-scroll">
          <div class="intrudction-con">{{company.des}}</div>
          <div class="company-phones">
            <van-row>
              <van-col span="8">
                <van-icon name="location-o" size="15px" style="margin-right:5px;"/>公司地址：
              </van-col>
              <van-col span="16" style="line-height:20px;">{{company.address}}</van-col>
            </van-row>
            <van-row style="margin-top:15px;">
              <van-col span="8">
                <van-icon name="phone-o" size="15px" style="margin-right:5px;"/>公司电话：
              </van-col>
              <van-col span="16">
                <span @click="callPhone(company.phone)">{{company.phone}}</span>8
              </van-col>
            </van-row>
            <van-row style="margin-top:15px;">
              <van-col span="8">
                <van-icon name="service-o" size="15px" style="margin-right:5px;"/>客服1号：
              </van-col>
              <van-col span="16">
                <span @click="callPhone(company.tel1)">{{company.tel1}}</span>
              </van-col>
            </van-row>
            <van-row style="margin-top:15px;">
              <van-col span="8">
                <van-icon name="service-o" size="15px" style="margin-right:5px;"/>客服2号：
              </van-col>
              <van-col span="16">
                <span @click="callPhone(company.tel2)">{{company.tel2}}</span>
              </van-col>
            </van-row>
          </div>
        </div>
        <div v-else>
          <div class="company-video">
            <video-player
              class="vjs-big-play-centered"
              ref="videoPlayer"
              :options="playerOptions"
              :playsinline="true"
            ></video-player>
          </div>
        </div>
      </div>
    </div>
    <!-- <tabbar></tabbar> -->
  </div>
</template>
<script>
import 'video.js/dist/video-js.css';
import { videoPlayer } from 'vue-video-player';
import { Tab, Tabs, Row, Col, Icon } from 'vant';
import { CarMixin } from '../util/mixin.js';
export default {
  components: {
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Row.name]: Row,
    [Col.name]: Col,
    [Icon.name]: Icon,
    videoPlayer,
  },
  mixins: [CarMixin],
  async created() {
    await this.getCompany();
    this.playerOptions.sources[0].src = this.company.url;
    this.playerOptions.poster = this.staticurl + this.company.vimg;
  },
  computed: {
    player() {
      return this.$refs.videoPlayer.player;
    },
  },
  activated() {
    if (this.activeStatus !== 3) {
      this.setTabbarActive(3);
    }
  },
  data() {
    return {
      active: 0,
      tabs: ['爱玖简介', '宣传视频'],
      playerOptions: {
        muted: true,
        language: 'en',
        playbackRates: [0.7, 1.0, 1.5, 2.0],
        height: 250,
        width: document.documentElement.clientWidth,
        sources: [
          {
            type: 'video/mp4',
          },
        ],
      },
    };
  },
  methods: {
    changeTab(index) {
      this.active = index;
    },
    callPhone(phone) {
      window.location.href = 'tel:' + phone;
    },
  },
};
</script>

<style lang="scss" scoped>
.about {
  height: 100vh;
  width: 100%;
  background-color: #0f0f0f;
  overflow: hidden;
  .company-logo {
    width: 100%;
    height: 105px;

    .head-img {
      width: 100%;
      height: 105px;
    }
  }
  @media screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) {
    .company-logo {
      width: 100%;
      height: 105px;
      .head-img {
        width: 100%;
        height: 105px;
      }
    }
  }
  .company-info {
    height: 100%;
    width: 100%;

    .company-tabs {
      margin: 0 20px;
      display: flex;
      display: -webkit-flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      width: 100%;
      .tab-item {
        height: 25px;
        width: 70px;
        color: #cccccc;
        font-size: 16px;
        line-height: 25px;
        text-align: center;
        &:nth-child(2) {
          margin-left: 30px;
        }
        &.item-active {
          border-bottom: 2px solid #f6b622;
          color: #f6b622;
        }
      }
    }
    .intrudction {
      width: 100%;
      height: 100%;
      overflow-x: hidden;
      overflow-y: auto;
      flex: 1;
      margin-bottom: 44px;
      .intrudction-con-scroll {
        width: 100%;
        height: auto;
        font-size: 16px;
        color: #cccccc;
        min-height: 600px;
        .intrudction-con {
          margin: 30px 20px;
          text-indent: 2em;
          line-height: 20px;
          height: auto;
        }
        .company-phones {
          margin: 20px;
        }
        .company-video {
          margin-top: 30px;
          width: 100%;
          height: 250px;
        }
      }
    }
  }
}
</style>
